<template>
  <div class="register">
    <p class="register_title">注册</p>
    <van-form @submit="onSubmit">
      <van-field
        v-model="userName"
        name="用户名"
        label="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="user"
        name="邮箱"
        label="邮箱"
        :rules="[{ pattern, message: '邮箱格式不正确' }]"
      />
      <van-field v-model="passWord" type="passWord" name="密码" label="密码" />
      <van-field
        v-model="passWord2"
        type="passWord"
        name="确认密码"
        label="确认密码"
        :rules="[{ validator, message: '两次密码不一致' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" color="#ff690c" native-type="submit"
          >注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { registerFunc } from "@/http/request.js";
import { Dialog } from "vant";
export default {
  data() {
    return {
      user: "",
      userName: "",
      passWord: "",
      passWord2: "",
      pattern:
        /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/,
    };
  },
  methods: {
    validator() {
      return this.passWord == this.passWord2;
    },
    // 请求服务器处理
    onSubmit() {
      // 执行注册的函数
      this.register(this.user, this.passWord, this.userName);
    },
    // 注册
    register(user, passWord, userName) {
      // if (rep_email.test(user)) {
      // 执行注册的API
      registerFunc("/user/register", {
        email: user,
        passWord,
        userName,
      }).then((data) => {
        if (data.code == 200) {
          Dialog.confirm({
            title: "注册成功",
            message: "是否跳转登录页面?",
          }).then(() => {
            // 页面跳转(传递参数)
            this.$router.push({ path: "/login" });
          });
        } else {
          Dialog({ message: data.msg });
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";

.register {
  padding: $p;
  background-color: #eee;
  position: fixed;
  width: 100%;
  height: 100%;

  .register_title {
    text-align: center;
    height: 30vw;
    line-height: 30vw;
    font-size: 5.3333vw;
  }
  .btn {
    margin-top: 20vw;
    width: 100%;
    button {
      width: 100%;
      background-color: $bgc;
      height: 10vw;
    }
  }
}
</style>